<template>
	<view class="main">
		<up-tabs lineColor="#e26788" :list="tabsList" keyName="CategoryTitle" @click="handleClick"></up-tabs>
		<scroll-view scroll-y="true" class="scroll" @scrolltolower="handleScrollToLower">
			<view class="scroll-box">
				<template v-for="(item,index) in dataList" :key="item.AlbumID">
					<view @click="handleDetails(item)">
						<image :src="item.ImgUrl" mode="widthFix" />
						<view class="album-name">{{ item.AlbumName }}</view>
					</view>
					<view v-if="(index + 1) % 8 === 0" class="box-id">
						<ad-custom :unit-id="$store.state.configInfo.adIds.nativeAd1"></ad-custom>
					</view>
				</template>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const http = uniCloud.importObject("wallpaper", {
		customUI: true,
	});
	export default {
		data() {
			return {
				tabsList: [],
				tabsIndex: 0,
				dataList: [],
				loading: false,
				paramsData: {
					categoryId: undefined,
					pageindex: 0,
					pagesize: 30,
				},
			};
		},
		onLoad() {
			this.init();
		},
		methods: {
			async init() {
				const res = await http.getAlbumTypeList();
				if (res.code === 200) {
					this.paramsData.categoryId = res.data.tabsList[0].CategoryID;
					this.tabsList = res.data.tabsList;
					this.dataList = res.data.dataList;
				} else {
					uni.showToast({
						title: res.msg,
						icon: "error",
					});
				}
			},
			handleClick(item) {
				this.tabsIndex = item.index;
				this.dataList = [];
				this.paramsData.pageindex = -1;
				this.loading = false;
				this.handleScrollToLower();
			},
			async handleScrollToLower() {
				if (this.loading) return;
				this.paramsData.pageindex++;
				this.paramsData.categoryId = this.tabsList[this.tabsIndex].CategoryID;
				const res = await http.getAlbumList(this.paramsData);

				if (!res.data.length) {
					this.loading = true;
					return uni.showToast({
						title: "没有更多数据了",
						icon: "none",
					});
				}

				if (res.code === 200) {
					this.dataList = this.dataList.concat(res.data);
				} else {
					uni.showToast({
						title: res.msg,
						icon: "error",
					});
				}
			},
			handleDetails(item) {
				uni.navigateTo({
					url: `/pages/Album/AlbumDetails?id=${item.AlbumID}`,
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.main {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.scroll {
			flex: 1;
			overflow: auto;
		}

		.scroll-box {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 24rpx;
			margin: 32rpx;
			box-sizing: border-box;

			.album-name {
				font-size: 28rpx;
				color: #333;
			}

			image {
				width: 100%;
				border-radius: 12rpx;
				display: block;
			}

			.box-id {
				grid-column: 1 / -1;
			}
		}
	}
</style>